<template>
	<view class="home-wrapper">
		<view class="banner-wrapper u-flex-center">
			<image style="width: 700rpx;" src="/static/image/banner.png" mode=""></image>
		</view>
		<view class="goods-list">
			<view class="goods-list-logo">
				<image src="/static/image/clothes-icon.png" style="width: 180rpx;height: 180rpx;" mode=""></image>
				<u--text color="#5A151A" text="靓鲸洗" class="theme-font" size="20"></u--text>
				<u--text color="#5A151A" text="洗衣洗鞋" class="theme-font" size="18"></u--text>
			</view>
			<view class="goods-wrapper">
				<view class="goods-item" v-for="item in goodsList" :key="item.goodsName" @click="toDetail(item)">
					<image style="width: 280rpx;border-radius: 13rpx;" :src="item.dyGoodsImages" mode="widthFix">
					</image>
					<u--text mode="" class="theme-font" :text="item.goodsName" size="17" margin="8px 0 0"
						lines="1"></u--text>
					<dy-price :current-price="item.price" :current-price-size="16" :original-price="item.purchasePrice"
						:hideTag="true"></dy-price>
				</view>
			</view>
		</view>
		<ImButton />
	</view>
</template>

<script>
	import ImButton from '@/components/im-button/im-button.vue'
	export default {
		data() {
			return {
				goodsList: []
			}
		},
		components: {
			ImButton
		},
		onLoad() {
			if (this.goodsTypeList.length > 0) {
				this.loadGoodsList()
			}
		},
		watch: {
			goodsTypeList(newVal, oldVal) {
				this.loadGoodsList()
			}
		},
		methods: {
			formatterGoodsList(good) {
				const dyGoodsImages = good.dyGoodsImages ? good.dyGoodsImages.split(',') : ['/static/image/goodImg.jpg']
				return {
					...good,
					dyGoodsImages: dyGoodsImages[0]
				}
			},
			loadGoodsList() {
				if (this.goodsTypeList.length == 0) {
					return
				}
				this.$u.api['goods/findGoodsListByType']({
					goodsTypeId: this.goodsTypeList[0].goodsMallTypeId
				}).then(res => {
					this.goodsList = res.data.data.rows
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/goods/detail/detail?goodId=${item.goodsMallId}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.home-wrapper {
		width: 100vw;
	}

	.banner-wrapper {
		width: 700rpx;
		margin: 0 auto;
	}

	.goods-list {
		width: 700rpx;
		height: 440rpx;
		border-radius: 25rpx;
		background-color: #FBCFCE;
		box-sizing: border-box;
		margin: 30rpx auto;
		display: flex;
		align-items: center;
		padding-left: 25rpx;

		&-logo {
			width: 200rpx;
			height: 360rpx;
			background-color: #FFEDED;
			display: flex;
			align-items: center;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}

	.goods-wrapper {
		display: flex;
		background-color: #fff;
		height: 360rpx;
		display: flex;
		align-items: center;
		margin-left: 25rpx;
		padding-left: 20rpx;
		width: 410rpx;
		border-radius: 16rpx;
		overflow: auto;
	}

	.goods-item {
		width: 370rpx;
		margin-right: 25rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 320rpx;
	}
</style>